<template>
  <div class="container">
    <div ref="chartContainer" class="chart-container"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'XingYun',
  data() {
    return {
      knowledgeData: {
        nodes: [
          /* 数学节点 */
          { id: 'm0', name: '高等数学', category: 'math-root', value: 12 },
          { id: 'm1', name: '线性代数', category: 'math-child', value: 8 },
          { id: 'm2', name: '概率论', category: 'math-child', value: 8 },
          { id: 'm3', name: '微积分', category: 'math-sub', value: 6 },

          /* 物理节点 */
          { id: 'p0', name: '理论物理', category: 'physics-root', value: 12 },
          { id: 'p1', name: '量子力学', category: 'physics-child', value: 8 },
          { id: 'p2', name: '热力学', category: 'physics-child', value: 8 },
          { id: 'p3', name: '电磁学', category: 'physics-sub', value: 6 },

          /* 编程节点（用户选中的第35行代码已调整id和name） */
          { id: 'c0', name: '编程基础', category: 'code-root', value: 6 },
          { id: 'c1', name: '数据结构', category: 'code-child', value: 8 },
          { id: 'c2', name: '算法设计', category: 'code-child', value: 8 },
          { id: 'c3', name: '编程语言', category: 'code-sub', value: 6 }
        ],
        links: [
          /* 数学父子关系（实线） */
          { source: 'm0', target: 'm1', type: 'parent' },
          { source: 'm0', target: 'm2', type: 'parent' },
          /* 数学前置/后置关系（虚线） */
          { source: 'm1', target: 'm3', type: 'pre' },  // 线性代数是微积分的前置
          { source: 'm2', target: 'm3', type: 'post' }, // 概率论是微积分的后置

          /* 物理父子关系（实线） */
          { source: 'p0', target: 'p1', type: 'parent' },
          { source: 'p0', target: 'p2', type: 'parent' },
          /* 物理前置/后置关系（虚线） */
          { source: 'p1', target: 'p3', type: 'pre' },  // 量子力学是电磁学的前置
          { source: 'p2', target: 'p3', type: 'post' }, // 热力学是电磁学的后置

          /* 编程父子关系（实线） */
          { source: 'c0', target: 'c1', type: 'parent' },
          { source: 'c0', target: 'c2', type: 'parent' },
          /* 编程前置/后置关系（虚线） */
          { source: 'c1', target: 'c3', type: 'pre' },  // 数据结构是编程语言的前置
          { source: 'c2', target: 'c3', type: 'post' }  // 算法设计是编程语言的后置
        ],
        categories: [
          // 数学分类（蓝色系）
          { name: 'math-root', itemStyle: { color: '#2C73D2' } },
          { name: 'math-child', itemStyle: { color: '#4895EF' } },
          { name: 'math-sub', itemStyle: { color: '#80FFDB' } },

          // 物理分类（红色系）
          { name: 'physics-root', itemStyle: { color: '#D62828' } },
          { name: 'physics-child', itemStyle: { color: '#F77F00' } },
          { name: 'physics-sub', itemStyle: { color: '#FCBF49' } },

          // 编程分类（绿色系）
          { name: 'code-root', itemStyle: { color: '#2A9D8F' } },
          { name: 'code-child', itemStyle: { color: '#457B9D' } },
          { name: 'code-sub', itemStyle: { color: '#A8DADC' } }
        ]
      }
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);

      const option = {
        title: { text: '星云效果知识点图', textStyle: { color: '#fff' } },
        backgroundColor: '#0a0a2a',
        tooltip: { textStyle: { color: '#fff' } },
        legend: [{
          data: this.knowledgeData.categories.map(c => c.name),
          textStyle: { color: '#fff' },
          orient: 'vertical',
          right: '10%',
          top: 'center'
        }],
        series: [{
          type: 'graph',
          layout: 'force',
          data: this.knowledgeData.nodes.map(node => {
            // 根据节点类型动态设置大小（父级 > 子级 > 次级）
            let sizeRatio;
            if (node.category.includes('root')) {
              sizeRatio = 8; // 父级节点大小系数（最大）
            } else if (node.category.includes('child')) {
              sizeRatio = 6; // 子级比父级小一号
            } else {
              sizeRatio = 4; // 次级节点最小
            }

            return {
              ...node,
              itemStyle: {
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
                  { offset: 0, color: '#fff' },
                  { offset: 1, color: node.category.includes('root') ? '#409EFF' : 
                         node.category.includes('child') ? '#FF6B6B' : 
                         '#4ECDC4'
                  }
                ]),
                shadowColor: '#fff',
                shadowBlur: node.value * sizeRatio * 2 // 光晕大小同步调整
              },
              symbolSize: node.value * sizeRatio // 根据类型调整节点大小
            }
          }),
          links: this.knowledgeData.links.map(link => ({ 
            ...link,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              width: 0.8,
              // 关键修改：根据关系类型设置线条类型
              type: link.type === 'parent' ? 'solid' : 'dashed',  // 父子用实线，其他用虚线
              curveness: 0.2  // 保持弯曲避免直线排列
            },
            symbol: ['none', 'arrow'],
            symbolSize: 8
          })),
          categories: this.knowledgeData.categories,
          roam: true,
          draggable: true,
          label: { 
            show: true,
            position: 'right',
            color: '#fff',
            fontSize: 12
          },
          force: {
            repulsion: 2000,
            edgeLength: [50, 120],
            friction: 0.8,
            nodeMass: 1.5
          }
        }]
      };

      this.chart.setOption(option);
      window.addEventListener('resize', () => this.chart.resize());
    }
  },
  beforeUnmount() {
    if (this.chart) this.chart.dispose();
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
}

.chart-container {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,50,0.5);
}
</style>
